<template>
<h2>录入房型</h2>
<table border="1">
    <tr>
        <td>房型名称</td>
        <td>
            <input type="text" v-model="info.RoomTypeName">
        </td>
    </tr>
    <tr>
        <td>售价</td>
        <td>
            <input type="number" v-model="info.RoomMoney">
        </td>
    </tr>
    <tr>
        <td>可住人数</td>
        <td>
            <input type="number" v-model="info.RoomNum">
        </td>
    </tr>
    <tr>
        <td>房型图片</td>
        <td>
            <input type="file" @change="UpLoad">
            <img style="width: 60px;height: 60px;" :src="info.RoomTypeImg">
        </td>
    </tr>
    <tr>
        <td>房型介绍</td>
        <td>
            <textarea v-model="info.RoomTypeInfo"></textarea>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="button" value="录入" @click="SaveData">
        </td>
    </tr>
</table>

</template>
<script setup lang="ts">
import { onMounted ,ref} from "vue";
import axios from 'axios';
import { useRouter } from "vue-router";

const router=useRouter();

const info=ref({
    RoomTypeName:"",
    RoomMoney:"",
    RoomNum:"",
    RoomTypeImg:"",
    RoomTypeInfo:""

})


const UpLoad=(e:any)=>{

    var file=e.target.files[0];
    var fd=new FormData();
    fd.append("img",file)

    axios.post('https://localhost:7141/api/Files/FileUpLoad',fd)
    .then(res=>{
        info.value.RoomTypeImg=res.data
    })



}


//录入
const SaveData=()=>{

    if(info.value.RoomTypeName==""){
        alert("房型名称不能为空");
        return;
    }

    if(info.value.RoomMoney==""){
        alert("售价不能为空");
        return;
    }
    if(info.value.RoomNum==""){
        alert("可住人数不能为空");
        return;

    }
    if(info.value.RoomTypeImg==""){
        alert("房型图片不能为空");
        return;

    }
    if(info.value.RoomTypeInfo==""){
        alert("房型介绍不能为空");
        return;

    }


    axios.post('https://localhost:7141/api/RoomType/AddRoomType',info.value)
    .then(res=>{
        if(res.data==-1){
            alert("房型已经存在");
        }
        else if(res.data>0){
            alert("录入成功");
            
        }
        else{
            alert("录入失败");
        }

        router.push("/ShowRoomType");
    })

}




</script>